<template>
	<view class="titlel"></view>
	<view class="uni-list">
		<radio-group @change="radioChange"  >
			<label class="uni-list-cell uni-list-cell-pd com" v-for="(item, index) in items" :key="item.value">
				<view class="com">
					<image :src=item.cerImg></image>
					<view>
						<view>车型：{{item.carName}}</view>
						<text>车牌：{{item.carPlate}}</text>
					</view>
				</view>
				<view class="radio">
					<radio :value="item.value" :checked="index === current" />
				</view>
			</label>
		</radio-group>
	</view>
	
	<!-- 添加车辆-->
	<view class="com_btn">
		<button class="btn" @click="but1" ><image src="/static/upkeep/加号.png"></image> 添加车辆</button>
	</view>
</template>

<script setup>
import { ref } from 'vue';
const current = ref(0)
const items = ref([
	{
		value: '琼B 88888',
		carName: '宾利-GT',
		carPlate:'琼B 88888',
		cerImg:'/static/logo.png'
	},
	{
		value: '琼A 88888',
		carName: '奔驰-GT',
		carPlate: '琼A 88888',
		cerImg:'/static/c1.png'
	},
	{
		value: '琼A 78787',
		carName: '劳斯莱斯',
		carPlate: '琼A 78787',
		cerImg:'/static/logo.png'
	}
])
function radioChange(evt) {
	for (let i = 0; i < items.value.length; i++) {
		if (items.value[i].value === evt.detail.value) {
			current.value = i;
			console.log(items.value[i].value);
			break;
		}
	}
}
function but1(){
	console.log("你好")
}

</script>

<style>
.titlel{
	background-color: #007AFF;
	height: 100rpx;
}  
.com{
	background-color: white;
	margin: 5px 20px;
	display: flex;	
	align-items: center;
	justify-content: space-between;
	padding: 5px 0;
	font-size: 20px;
}
.com image{
	width: 60px;
	height: 60px;
	border-radius: 30px;
}
.com > view{
	margin-left: 20px;
}
.com text{
	font-size: 17px;
}
.radio{
	padding-right: 20px;
}
.uni-list-cell{
	border-radius: 10px;
}
.uni-list{
	margin-top: -50px;
}
.btn{
	border-radius: 20px;
	margin:0 30px;
	color: white;
	background-color: #3789FF;
}
.btn image {
	width: 15px;
	height: 15px;
}
.com_btn{
	background-color: white;
	position: fixed;
	bottom: 5rpx;
	left: 0;
	right: 0;
	z-index: 999;
}
</style>
